{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>{{ tenant.name }} - 表单列表</h2>
        <a href="{% url 'new_form' tenant.id %}" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> 新建表单
        </a>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="list-group">
                {% for template in templates %}
                    <div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" 
                         data-form-id="{{ template.id }}">
                        <div>
                            <h5 class="mb-1">{{ template.title }}</h5>
                            <small class="text-muted">创建于 {{ template.created_at|date:"Y-m-d H:i" }}</small>
                        </div>
                        <div class="btn-group">
                            <a href="{% url 'edit_form' tenant.id template.id %}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-pencil"></i> 编辑
                            </a>
                            <a href="{% url 'submission_list' template.id %}" class="btn btn-sm btn-outline-success">
                                <i class="bi bi-list-check"></i> 提交记录
                            </a>
                            <a href="{% url 'form_detail' template.id %}" class="btn btn-sm btn-outline-secondary">
                                <i class="bi bi-eye"></i> 查看
                            </a>
                            <button type="button" class="btn btn-sm btn-outline-danger" 
                                    onclick="deleteForm({{ template.id }}, '{{ template.title|escapejs }}')">
                                <i class="bi bi-trash"></i> 删除
                            </button>
                        </div>
                    </div>
                {% empty %}
                    <div class="list-group-item">暂无表单，请点击右上角创建</div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- 添加删除确认对话框 -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除表单 "<span id="formTitle"></span>" 吗？</p>
                <p class="text-danger">
                    <i class="bi bi-exclamation-triangle"></i> 
                    此操作不可恢复，表单的所有数据都将被删除。
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">确定删除</button>
            </div>
        </div>
    </div>
</div>

<script>
let deleteModal;
let formToDelete;

document.addEventListener('DOMContentLoaded', function() {
    deleteModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
});

function deleteForm(formId, formTitle) {
    formToDelete = formId;
    document.getElementById('formTitle').textContent = formTitle;
    deleteModal.show();
}

document.getElementById('confirmDelete').addEventListener('click', async function() {
    try {
        const response = await fetch(`/form/${formToDelete}/delete/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json'
            }
        });

        const data = await response.json();
        
        if (data.success) {
            deleteModal.hide();
            // 找到并移除对应的表单项
            const formElement = document.querySelector(`[data-form-id="${formToDelete}"]`);
            if (formElement) {
                formElement.remove();
            } else {
                window.location.reload();
            }
        } else {
            alert(data.error || '删除失败');
        }
    } catch (error) {
        console.error('Error:', error);
        alert('删除失败，请稍后重试');
    }
});
</script>

<!-- 添加 CSRF 令牌 -->
{% csrf_token %}
{% endblock %} 